<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <th:block th:include="include :: header('爱看漫画')"/>
    <th:block th:include="include :: cartoon-index-css"/>
    <style>

        .swiper-container {
            width: 100%;
            height: auto;
            padding: 90px 0;
            margin-left: auto;
            margin-right: auto;

        }

        .swiper-slide {
            text-align: center;
            font-size: 18px;
            background: #fff;
            height: 200px;

            /* Center slide text vertically */
            display: -webkit-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            -webkit-justify-content: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            -webkit-align-items: center;
            align-items: center;
            transition-property: all;
        }

        #progressEffect {
            position: absolute;
            z-index: 10;
            top: 20px;
            left: 20px;
        }


        .articl-1-2-box {
            height: 250px;
            width: 200px;
            border-radius: 5px;
        }

        .articl-1-2-box a img {
            height: 100%;
            width: 100%;
            border-radius: 5px;
        }

        .articl-1-2-box-left {
            float: left;
            margin-left: 3px;
        }

        .articl-1-2-box-right {
            float: right;
            margin-right: 3px;
        }

        .articl-1-2-box a div {
            position: relative;
            top: -26px;
            color: white;
        }

        .articl-1-2-box a div {
            background: rgba(0, 0, 0, 0.5);
            font-size: 0.9rem;
        }

        .articl-1-2-box a p {
            font-size: 0.9rem;
            width: 100%;
            margin: 0px;
            padding: 0px;
            color: white;
        }

        .articl-1-2-box a div span:hover {
            color: #3498db;
        }

    </style>
</head>
<body>

<!-- Swiper -->
<div class="swiper-container" style="background: #605456;">
    <div class="swiper-wrapper" id="swiper-wrapper">

        <div class="swiper-slide">
            <div class="articl-1-2-box">
                <a href="/manhua/look/over/55" target="_blank">
                    <img src="/img/slidingimg/xianfeng.jpg" alt="图片">
                    <p>仙风剑雨录</p>
                </a>
            </div>
        </div>
        <div class="swiper-slide">
            <div class="articl-1-2-box">
                <a href="/manhua/look/over/56" target="_blank">
                    <img src="/img/slidingimg/wushen.jpg" alt="图片">
                    <p>武神主宰</p>
                </a>
            </div>
        </div>
        <div class="swiper-slide">
            <div class="articl-1-2-box">
                <a href="/manhua/look/over/35" target="_blank">
                    <img src="/img/slidingimg/dashenxian.jpg" alt="图片">
                    <p>我是大神仙</p>
                </a>
            </div>
        </div>
        <div class="swiper-slide">
            <div class="articl-1-2-box">
                <a href="/manhua/look/over/48" target="_blank">
                    <img src="/img/slidingimg/wanjiexianzong.png" alt="图片">
                    <p>万界仙踪</p>
                </a>
            </div>
        </div>
        <div class="swiper-slide">
            <div class="articl-1-2-box">
                <a href="/manhua/look/over/53" target="_blank">
                    <img src="/img/slidingimg/yuxie.jpg" alt="图片">
                    <p>浴血商后</p>
                </a>
            </div>
        </div>
        <div class="swiper-slide">
            <div class="articl-1-2-box">
                <a href="/manhua/look/over/50" target="_blank">
                    <img src="/img/slidingimg/dashi.jpg" alt="图片">
                    <p>我家大师兄脑子有坑</p>
                </a>
            </div>
        </div>
        <div class="swiper-slide">
            <div class="articl-1-2-box">
                <a href="/manhua/look/over/47" target="_blank">
                    <img src="/img/slidingimg/long.jpg" alt="图片">
                    <p>我身上有条龙</p>
                </a>
            </div>
        </div>
        <div class="swiper-slide">
            <div class="articl-1-2-box">
                <a href="/manhua/look/over/43" target="_blank">
                    <img src="/img/slidingimg/yiren.jpg" alt="图片">
                    <p>一人之下</p>
                </a>
            </div>
        </div>
        <div class="swiper-slide">
            <div class="articl-1-2-box">
                <a href="/manhua/look/over/34" target="_blank">
                    <img src="/img/slidingimg/wudong.jpg" alt="图片">
                    <p>武动乾坤</p>
                </a>
            </div>
        </div>
        <div class="swiper-slide">
            <div class="articl-1-2-box">
                <a href="/manhua/look/over/28" target="_blank">
                    <img src="/img/slidingimg/fengshenji.jpg" alt="图片">
                    <p>封神纪一</p>
                </a>
            </div>
        </div>
        <div class="swiper-slide">
            <div class="articl-1-2-box">
                <a href="/manhua/look/over/32" target="_blank">
                    <img src="/img/slidingimg/fengshenji2.jpg" alt="图片">
                    <p>封神纪二</p>
                </a>
            </div>
        </div>

    </div>

</div>


<th:block th:include="include :: footer"/>

<th:block th:include="include :: cartoon-swiper-js"/>

<script>
    let effect = 0;
    var prefix = ctx + "manhua/look";




    /* $(function () {
         $.operate.request(prefix+"/slidingData",null,function (row){
             if(row.code === web_status.SUCCESS){
                 let list = row.data[0];
                 let html = '';
                 for (let i = 0, len = list.length; i < len; i++) {
                     let author = list[i].author;
                     if (author.length > 4) {
                         author = author.substring(0,4) + "..";
                     }
                     let name = list[i].name;
                     if (name.length > 5) {
                         name = name.substring(0,5) + "..";
                     }
                     html += ` <div class="swiper-slide">
                                  <div class="articl-1-2-box" >
                                      <a href="/manhua/look/over/${list[i].id}" target="_blank">
                                          <img src="${$.haHa.decode(list[i].theCover)}" alt="${list[i].name}">
                                          <div>
                                              <span class="articl-1-2-box-left">${author}</span>
                                              <span class="articl-1-2-box-right">${list[i].reading}</span>
                                          </div>
                                          <p>${name}</p>
                                      </a>
                                  </div>
                              </div>`;
                 }
                 $("#swiper-wrapper").append(html);
                 /!*关闭遮罩层*!/
                 $.modal.closeLoading();
             }else{
                 $.modal.alertError("未知错误.....");
             }
         });
     });*/


    var swiper = new Swiper('.swiper-container', {
        loop: true,
        speed: 2500,
        slidesPerView: 7,
        spaceBetween: 30,
        centeredSlides: true,
        watchSlidesProgress: true,
        autoplay: {
            delay: 1,
            stopOnLastSlide: false,
            disableOnInteraction: true,
        },
        observer: true,//修改swiper自己或子元素时，自动初始化swiper
        observeParents: true,//修改swiper的父元素时，自动初始化swiper
        on: {
            setTranslate: function () {
                slides = this.slides
                for (i = 0; i < slides.length; i++) {
                    slide = slides.eq(i)
                    progress = slides[i].progress
                    //slide.html(progress.toFixed(2)); 看清楚progress是怎么变化的
                    slide.css({'opacity': '', 'background': ''});
                    slide.transform('');//清除样式

                    if (effect == 1) {
                        slide.transform('scale(' + (1 - Math.abs(progress) / 8) + ')');
                    } else if (effect == 2) {
                        slide.css('opacity', (1 - Math.abs(progress) / 6));
                        slide.transform('translate3d(0,' + Math.abs(progress) * 20 + 'px, 0)');
                    } else if (effect == 3) {
                        slide.transform('rotate(' + progress * 30 + 'deg)');
                    } else if (effect == 4) {
                        slide.css('background', 'rgba(' + (255 - Math.abs(progress) * 20) + ',' + (127 + progress * 32) + ',' + Math.abs(progress) * 64 + ')');
                    } else {
                        effect = 0;
                    }

                }
            },
            setTransition: function (transition) {
                for (var i = 0; i < this.slides.length; i++) {
                    var slide = this.slides.eq(i)
                    slide.transition(transition);
                }
            },
        },
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
        pagination: {
            el: '.swiper-pagination',
            clickable: true,
        },
    });
    window.setInterval(function () {
        effect++;
        swiper.update();
    }, 10000);


</script>
<script>
    /*百度统计代码*/
    var _hmt = _hmt || [];
    (function() {
        var hm = document.createElement("script");
        hm.src = "https://hm.baidu.com/hm.js?3f3cd16bc5ac7aa62b5e84829f76e113";
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(hm, s);
    })();

    /*306 自动收入*/
    (function(){
        var src = "https://s.ssl.qhres2.com/ssl/ab77b6ea7f3fbf79.js";
        document.write('<script src="' + src + '" id="sozz"><\/script>');
    })();
</script>
</body>
</html>
